<template>
   <div>
       <div style="padding: 5px 0">
           <!--      调用load方法进行搜索-->
           <el-input v-model="searchText" @keyup.enter.native="load" style="width: 200px"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
           <el-button @click="load" type="primary" style="margin: 5px">搜索</el-button>
           <el-button @click="reset" type="warning" style="margin: 5px">重置</el-button>
           <el-button @click="add" type="success" style="margin: 5px">新增</el-button>
       </div>
<!--    数据显示-->
    <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="id" label="商品id" width="80px"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <!--      商品图片使用一个模板显示-->
        <el-table-column label="商品图片" width="120px">
            <template slot-scope="scope">
                <img :src="scope.row.imgs" style="width: 90px;height: 80px">
            </template>
        </el-table-column>
        <el-table-column prop="description" label="商品描述"></el-table-column>
        <el-table-column prop="categoryName" label="商品类别"></el-table-column>
        <el-table-column prop="discount" label="折扣"></el-table-column>
        <el-table-column prop="createTime" label="创建时间">
            <template slot-scope="scope">
                <!--  scope.row包含了当前行的所有数据        -->
                {{scope.row.createTime.replace(" ","&nbsp;&nbsp;")}}
            </template>
        </el-table-column>
        <el-table-column label="推荐" width="150" >
            <!--      推荐商品-->
            <template slot-scope="scope">
                <!--          开关-->
                <!--         v-model 使用Vue的双向绑定，将开关的状态与当前行的recommend属性绑定-->
                <!--   @change开关状态发生改变，会调用方法，并将当前行的数据作为参数传入       -->
                <el-switch
                        v-model="scope.row.recommend"
                        @change="handleRecommend(scope.row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </template>
        </el-table-column>
        <!--操作-->
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
<!--                编辑商品-->
                <el-button type="primary" icon="el-icon-edit" circle  @click="edit(scope.row)"></el-button>
                <el-popconfirm
                        @confirm="del(scope.row.id)"
                        title="确定删除？"
                >
                    <el-button type="danger" icon="el-icon-delete" circle slot="reference" style="margin-left: 10px"></el-button>
                </el-popconfirm>
            </template>
        </el-table-column>


    </el-table>
       <!--    分页组件-->
       <div style="margin-top: 10px">
           <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-size="pageSize"
                   :page-sizes="[3, 5, 8, 10]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
           >
           </el-pagination>
       </div>
   </div>
</template>

<script>
    import API from '../../../utils/request'
    const url = "/api/good/"
    export default {

        name: "Goods",
        data(){
            return{
                tableData: [],
                searchText: '',
                pageNum: 1,
                pageSize: 5,
                total:0,
                entity: {},

            }
        },
        created() {
            this.load()
        },
        methods:{
//加载页面上显示的数据  发送get请求，请求参数包括页码 页码大小和搜索文本
            load() {
                API.get(url + "fullPage", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        searchText: this.searchText
                    }
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            //处理商品的推荐状态
            handleRecommend(good){
                API.get(url + "recommend", {
                    params: {
                        id: good.id,
                        isRecommend : good.recommend,
                    }
                }).then(res => {
                    if(res.code==='200'){
                        this.$message.success("修改成功")
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            //删除一个商品
            del(id) {
                API.get(url + "delete", { params : {id}}).then(res => {
                    this.$message({
                        type: "success",
                        message: "操作成功"
                    })
                    this.load()
                })
            },
            //编辑一个现有商品，将商品对象传递给新页面  entity  obj要传进去的scope.row
            edit(obj) {
                this.entity = JSON.parse(JSON.stringify(obj))
                //向URl传good字段
                this.$router.push({name: 'goodInfo',query:{good: JSON.stringify(this.entity)}})
            },
            //搜索文本并重新加载数据
            reset(){
                this.searchText = '';
                this.load()
            },
            //导航到一个新的页面来增加一个新商品
            add() {

                this.$router.push("goodInfo")
            },
            //当页面大小改变时，更新pagesize并重新加载数据
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            //当前页数改变时，更新pageNum并重新加载数据
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum
                this.load()
            },
        },
    }
</script>

<style scoped>

</style>